<template>
  <div class="home">
    
    <div class="app-top">
      <el-row type="flex" class="row-bg" justify="space-between">
        <el-col :span="12">
          <img style="float: left;width: 240px; margin-top:10px" src="@/assets/logo.png">
          <div style="float: left;line-height: 90px; font-size: 18px; font-weight: bold; color:#a9892d">一键投保  ·  省时  ·  省力  ·  智能</div>
        </el-col>
        <el-col :span="12" style="margin-top:15px">
          <div style="float: right">
            <div style="font-size: 26px">服务热线：0755-28505232</div>
            <div>
              <span v-if="!!token">{{ username }}</span>
              <el-button v-if="!!token" type="text" @click="logOut">退出</el-button>
              <el-button @click="() => $router.push('/reviewPolicy')" v-if="!!token" type="text">我的汇保</el-button>
              <el-divider v-if="!!token" direction="vertical"></el-divider>
              <el-popover placement="bottom-end" width="350" trigger="hover">
                <el-button slot="reference" type="text">手机汇保</el-button>
                <div>
                  <img src="../../../assets/sjhb.jpg">
                </div>
              </el-popover>
              <el-divider direction="vertical"></el-divider>
              <el-button @click="toHelpCenter" type="text">帮助中心</el-button>
            </div>
          </div>
        </el-col>
      </el-row>
    </div>

    <el-divider></el-divider>
    <el-row :gutter="20">
      <el-col :span="18">
        <el-page-header style="margin-bottom: 20px" @back="goBack" :content="$route.query.batchOrder ? '批单' : $route.query.isDetail ? '草稿详情' : '投保'">
        </el-page-header>
        <el-card class="box-card">
          <temp-index></temp-index>
        </el-card>
      </el-col>
      <el-col :span="6">
        <div style="padding:16px;">
          <div style=" background-color: #fff;">
            <div class="title" style="font-size:16px">保险介绍</div>
            <!-- <el-divider></el-divider> -->
            <p style="font-size:14px;color: rgb(135 135 135);line-height: 24px;">
              {{ info.insureIntroduction }}
            </p>
            <!-- <div class="title" style="font-size:16px; margin-bottom: 12px">费率：{{ info.rate || 0 }} 起</div> -->
            <!-- <el-divider></el-divider> -->
            <!-- <div class="title" style="font-size:16px">不承担保物品</div>
                <el-divider></el-divider>
                <p style="font-size:14px;color: rgb(135 135 135);line-height: 24px;">
                    危险品、毒品、二手货物、武器、弹药、打火机（灌气的）、蓄电池（有电解液）、现金、珠宝首饰、有价证券、文件单证、信函邮票、古玩字画、古玩家具、放射性金属、核燃料、活性畜、禽类、鱼类、水产品以及条款规定的其它除外货物
                </p> -->
            <div class="title" style="font-size:16px">保障范围</div>
            <div v-if="isHighway">
              <el-checkbox style="font-size:14px; margin:12px 0;" v-model="basicStatus" :disabled="true">基本险</el-checkbox>
              <p>本保险分为基本险和综合险两种。保险货物遭受损失时，保险人按承保险别的责任范围负赔偿责任</p>
              <p style="font-size:12px; color:rgb(150, 150, 150); line-height: 18px;"
                v-for="(item) in info.insureConfigSafeguards && info.insureConfigSafeguards.filter(item => item.basicStatus === '1')" :key="item.safeguardId">
                {{ item.safeguardName }}
              </p>
            </div>
            <el-checkbox style="font-size:14px; margin:12px 0;" v-model="synthesisStatus" :disabled="true">综合险</el-checkbox>
            <p v-if="isHighway">本保险除包括基本险责任外，保险人还负责赔偿：</p>
            <p style="font-size:12px; color:rgb(150, 150, 150); line-height: 18px;"
              v-for="(item) in info.insureConfigSafeguards && info.insureConfigSafeguards.filter(item => item.synthesisStatus === '1')" :key="item.safeguardId">
              {{ item.safeguardName }}
            </p>
            <div class="title" style="font-size:16px">责任起讫</div>
            <p v-if="!isHighway" style="font-size:14px;color: rgb(135 135 135);line-height: 24px;">
              保险责任自签发保险凭证和保险货物运离起运地发货人的最后 一个仓库或储运处所时起，至该保险凭证上注明的目的地的收货人在当地的第一个仓库或储存处所时终止。
              但保险货物在卸载港全部卸离货船后，如果收货人未及时提货，则保险责任的终止期最多延长至以保险货物在卸载港全部卸离货船后的十五天为限。
            </p>
            <p v-if="isHighway" style="font-size:14px;color: rgb(135 135 135);line-height: 24px;">
              保险责任的起讫期，是自签发保险凭证和保险货物运离起运地发货人的最后一个仓库或储存处所时起，至该保险凭证上注明的目的地的收货人在当地的第一个仓库或储存处所时终止。但保险货物运抵目的地后，如果收货人未及时提货，则保险责任的终止期最多延长至以收货人接到《收货通知单》后的十五天为限（以邮戳日期为准）。
            </p>
            <div class="title" style="font-size:16px">索赔期限</div>
            <p style="font-size:14px;color: rgb(135 135 135);line-height: 24px;">
              根据《中华人民共和国保险法》及《中华人民共和国民法总则》 的规定，本保险的被保险人或者受益人，向保险人请求赔偿或者给付保险金的诉讼时效期间为二年，自保险人知道保险事故发生之日起计算。
            </p>
            <div class="title" style="font-size:16px">理赔报案</div>
            <p style="font-size:14px;color: rgb(135 135 135);line-height: 24px;">
              24 小时在线客服，为您提供在线报案登记服务，协助快速理赔，缩短赔付周期。
            </p>
            <div class="title" style="font-size:16px">保单真伪查验</div>
            <p style="font-size:14px;color: rgb(135 135 135);line-height: 24px;">
              随时致电中国太平洋财产保险股份有限公司官方客服电话95500查验。
            </p>
          </div>
          <!-- <div style="margin: 16px 0;">
                <el-button block type="info" @click="toTempIndex">确认并填写投保保单</el-button>
            </div> -->
        </div>
      </el-col>
    </el-row>
    
    <div style="height: 140px; width: 100%; background-color: rgb(245, 245, 245); margin-top: 20px">
      <div style="margin: auto; width: 60%; padding-top:20px">
        <el-row :gutter="20">
          <el-col :span="6">
            <div style="float:left">
              <i class="el-icon-s-shop" style="color: #409eff; font-size: 48px;"></i>
            </div>
            <div style="float:left; margin-top:12px; margin-left:4px">操作方便快捷</div>
          </el-col>
          <el-col :span="6">
            <div style="float:left">
              <i class="el-icon-s-claim" style="color: #409eff; font-size: 48px;"></i>
            </div>
            <div style="float:left; margin-top:12px; margin-left:4px">省时省力智能</div>
          </el-col>
          <el-col :span="6">
            <div style="float:left">
              <i class="el-icon-platform-eleme" style="color: #409eff; font-size: 44px;"></i>
            </div>
            <div style="float:left; margin-top:12px; margin-left:6px">产品定制多样</div>
          </el-col>
          <el-col :span="6">
            <div style="float:left">
              <i class="el-icon-s-opportunity" style="color: #409eff; font-size: 48px;"></i>
            </div>
            <div style="float:left; margin-top:12px">全程跟踪服务</div>
          </el-col>
        </el-row>
        <div style="text-align: center; margin-top:10px">
          <a @click="toLicense" href="#" style="">工商营业执照</a>
          <el-divider direction="vertical"></el-divider>
          <a @click="toLicence" href="#" style="">保险经纪业务许可证</a>
          <!-- <el-divider direction="vertical"></el-divider>
          <span style="">法律声明</span> -->
        </div>
        <div style="text-align: center; margin-top:10px; color:#818181">
          © 深圳汇保互联网信息服务有限公司 |
          <a href="https://beian.miit.gov.cn/#/Integrated/recordQuery">粤ICP备2024177701</a>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
import tempIndex from "./temp-index.vue";
export default {
  components: {
    tempIndex,
  },
  computed: {
    userInfo() {
      const info = localStorage.getItem("userInfo");
      if (info) {
        return JSON.parse(info);
      }
      return undefined;
    },
    isHighway() {
      return this.$route.query.templateName.includes("公路");
    },
  },
  data() {
    return {
      username: localStorage.getItem("username"),
      token: localStorage.getItem("token"),
      basicStatus: true,
      synthesisStatus: true,
      info: {},
      images: [
        "https://img.yzcdn.cn/vant/apple-1.jpg",
        "https://img.yzcdn.cn/vant/apple-2.jpg",
        "https://img.yzcdn.cn/vant/apple-3.jpg",
        "https://img.yzcdn.cn/vant/apple-4.jpg",
      ],
      list2: [
        {
          name: "集装箱运输险",
          title: "费率: 0.03%起",
          skillTag: ["火灾", "爆炸", "台风等自然灾害", "雨淋", "盗抢"],
        },
        {
          name: "集装箱运输险",
          title: "费率: 0.03%起",
          skillTag: ["火灾", "爆炸", "台风等自然灾害", "雨淋", "盗抢"],
        },
      ],
      checkboxGroup: ["1", "2"],
    };
  },
  methods: {
    toLicense() {
      window.open("/#/license", "_blank");
    },
    toLicence() {
      window.open("/#/licence", "_blank");
    },
    goBack() {
      const url = window.location.hash;
      console.log('url', url)
      if (url.includes("orderNum")) {
        this.$router.push("/reviewPolicy");
        return
      } if (url.includes("warrantyDarftId")) {
        this.$router.push("/policyDraft");
        return
      } else {
        this.$router.push({
          path: "homePage"
        });
      }
    },
    logOut() {
      this.$toConfirm("是否确认退出", "warning", "提示")
        .then(() => {
          localStorage.removeItem("token");
          localStorage.removeItem("username");
          this.$router.push("/homePage");
          location.reload();
        })
        .catch(() => {
          //
        });
    },
    toHelpCenter() {
      this.$router.push("/helpCenter");
    },
    toTempIndex() {
      if (!this.userInfo) {
        this.$message.warning("您还未登录，请先登录");
        return;
      }
      if (this.userInfo.checkStatus * 1 !== 3) {
        this.$message.warning(
          "您还未提交资料审核或审核还未通过，请耐心等待，或提交资料审核"
        );
        return;
      }
      this.$router.push({
        path: "/temp1",
        query: {
          insureInfoId: this.$route.query.insureInfoId,
          templateName: this.$route.query.templateName,
        },
      });
    },
    onClickLeft() {
      this.$router.push("/home");
    },
    onClickRight() {
      this.$router.push("/login");
    },
    clickButton() {
      //
    },
    getInfo() {
      const insureInfoId = this.$route.query.insureInfoId;
      this.$get("/index/info", { insureInfoId }).then((res) => {
        if (res && res.code * 1 === 200) {
          this.info = res.data.data;
        } else {
          this.info = {};
        }
      });
    },
  },
  mounted() {
    this.getInfo();
  },
};
</script>

<style scoped>
.app-top {
  height: 80px;
  width: 100%;
  margin: auto;
}

.home {
  background-color: #ffffff;
  width: 80%;
  margin: auto;
}

/* .title {
    margin: 5px 16px;
  } */
</style>